<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>好友选择</title>
<link href="ui.friendsuggest.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui.friendsuggest.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //多选模式
        var test = new giant.ui.friendsuggest();
        //单选模式
        var test2 = new giant.ui.friendsuggest({
            btnAll:"#ui-fs2 .ui-fs-icon",
            btnCloseAllFriend:"#ui-fs2 .ui-fs-all .close",
            btnNextPage:"#ui-fs2 .ui-fs-all .next",
            btnPrevPage:"#ui-fs2 .ui-fs-all .prev",
            selectFriendType:"#ui-fs-friendtype2",
            allFriendContainer:"#ui-fs2 .ui-fs-all" ,
            allFriendListContainer:"#ui-fs2 .ui-fs-all .ui-fs-allinner div.list",
            frinedNumberContainer:"#ui-fs2 .ui-fs-allinner .page b",
            totalSelectNum:1,
            resultContainer:"#ui-fs2 .ui-fs-result",
            input:"#ui-fs2 .ui-fs-input input",
            inputContainer:"#ui-fs2 .ui-fs-input",
            dropDownListContainer:"#ui-fs2 .ui-fs-list",
            selectType:"single",
            selectCallBack:function(fid, name, image) {
                alert("您选择的好友ID为"+fid);
                this.setDropDownListHide();
                this.setAllFriendHide();
            }
        });
    });
</script>
</head>
<body style="margin:20px;width:500px;">
<br />
多选模式:
<div id="ui-fs" class="ui-fs">
    <div class="ui-fs-result clearfix">
    </div>
    <div class="ui-fs-input">
        <input type="text" value="输入好友姓名(支持全拼输入)" maxlength="30" />
        <a class="ui-fs-icon" href="javascript:void(0)" title="查看所有好友">查看所有好友</a>
    </div>
    <div class="ui-fs-list">
       数据加载中....
    </div>
    <div class="ui-fs-all">
        <div class="top">
            <select id="ui-fs-friendtype"><option value="-1">所有好友</option></select>
            <div class="close" title="关闭">关闭</div>
        </div>
        <div class="ui-fs-allinner">
            <div class="page clearfix">
                <div class="llight1">还有<b>30</b>人可选</div><div class="button"><span class="prev">上一页</span><span class="next">下一页</span></div>
            </div>
            <div class="list clearfix">
                数据加载中...
            </div>
        </div>
    </div>
</div>
单选模式
<div id="ui-fs2" class="ui-fs">
    <div class="ui-fs-result clearfix">
    </div>
    <div class="ui-fs-input">
        <input type="text" value="输入好友姓名(支持全拼输入)" maxlength="30" />
        <a class="ui-fs-icon" href="javascript:void(0)" title="查看所有好友">查看所有好友</a>
    </div>
    <div class="ui-fs-list">
       数据加载中....
    </div>
    <div class="ui-fs-all">
        <div class="top">
            <select id="ui-fs-friendtype2"><option value="-1">所有好友</option></select>
            <div class="close" title="关闭">关闭</div>
        </div>
        <div class="ui-fs-allinner">
            <div class="page clearfix">
                <div class="llight1">你可以选择<b>1</b>人</div><div class="button"><span class="prev">上一页</span><span class="next">下一页</span></div>
            </div>
            <div class="list clearfix">
                数据加载中...
            </div>
        </div>
    </div>
</div>
</body>
</html>
